<template>
	<scroll-view scroll-x class="app-scroll" :scroll-into-view="`${scrollId}`" scroll-with-animation>
		<view class="app-content">
			<view class="app-item" v-for="(item, index) in timeList"  :id="`ms_${index}`" :key="index" :class="{'app-active-item': activeIndex === index, 'app-top': item.type === 2}">
				<app-form-id @click="active(item, index)">
					<view class="app-ad dir-top-nowrap main-center cross-center" v-if="item.type !== 2">
						<view class="app-time" :class="{'active-color': activeIndex === index}">{{item.new_open_time}}</view>
						<view class="app-label" :class="{'active-color': activeIndex === index}">{{item.label}}</view>
						<view class="app-icon"></view>
					</view>
					<view class="app-ad" v-else>
						<text>{{item.label}}</text>
						<view class="app-icon"></view>
					</view>
				</app-form-id>
			</view>
		</view>
	</scroll-view>
</template>

<script>
    export default {
        name: "app-scroll",
	    props: {
            timeList: Array,
	    },
        data() {
            return {
                scrollId: '',
	            activeIndex: 0,
            }
        },
	    methods: {
            active(item, index) {
                this.activeIndex = index;
                let i = index - 2;
                this.scrollId = `ms_${i}`;
                this.$emit('click', index, item);
            }
	    },
	    watch: {
            timeList: {
                handler: function(value) {
                    value.map((item, index) => {
                        if (item.status === 1) {
                            console.log(index);
                            this.scrollId = `ms_${index-2}`;
                            this.activeIndex = index;
                        }
                    });
                },
	            immediate: true,
            }
	    }
    }
</script>

<style scoped lang="scss">
	.app-scroll {
		white-space: nowrap;
		width: #{750rpx};
		height: #{120rpx};
		.app-content {
			width: #{750rpx};
			height: #{96rpx};
			/*white-space: nowrap;*/
			display: flex;
			z-index: 1601;
			background-color: #30353c;
			-webkit-flex-direction: row;
			flex-direction: row;
			.app-top {
				line-height: #{96rpx};
			}
			.app-item {
				display: inline-block;
				width: #{150rpx};
				height: #{96rpx};
				background-color: #30353c;
				position: relative;
				.app-ad {
					width: #{150rpx};
					height: #{96rpx};
				}
				.app-d {
					font-size: #{32rpx};
				}
				view {
					color: #bbbbbb;
					text-align: center;
				}
				.app-time {
					width: #{150rpx};
					font-size: #{32rpx};
				}
				.app-label {
					width: #{150rpx};
					font-size: #{22rpx};
				}
			}
			.app-active-item {
				color: white !important;
				background-color: #ff4544;
				.app-icon {
					border: #{20rpx} solid #ff4544;
					border-bottom-color: transparent;
					border-left-color: transparent;
					border-right-color: transparent;
					position: absolute;
					bottom: #{-36rpx};
					left: 50%;
					transform: translateX(-50%);
				}
				.active-color {
					color: white !important;
				}
			}
		}
	}
</style>